<template>
  <el-form label-position="left" ref="form" :model="form" label-width="100px">
    <el-row
      :gutter="30"
      style="border-bottom: 1px solid #ccc; margin-bottom: 20px"
    >
      <el-col :span="12">
        <el-form-item label="公司名称">
          <el-input :disabled='isPreview' v-model="form.orgName" placeholder=""></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="税号">
          <el-input :disabled='isPreview' v-model="form.enterpriseCode" placeholder=""></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="公司地址">
          <el-input :disabled='isPreview' v-model="form.address" placeholder=""></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row
      :gutter="30"
      style="border-bottom: 1px solid #ccc; margin-bottom: 20px"
    >
      <el-col :span="12">
        <el-form-item label="省" prop="provinceName">
          <el-select :disabled='isPreview' v-model="form.provinceName" placeholder="请选择省份">
            <el-option
              v-for="item in province"
              :key="item.value"
              :label="item.text"
              :value="item.text"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="市" prop="cityName">
          <el-select :disabled='isPreview' v-model="form.cityName" placeholder="请选择城市">
            <el-option
              v-for="item in city"
              :key="item.value"
              :label="item.text"
              :value="item.text"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="县" prop="areaName">
          <el-select :disabled='isPreview' v-model="form.areaName" placeholder="请选择县">
            <el-option
              v-for="item in area"
              :key="item.value"
              :label="item.text"
              :value="item.text"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="30">
      <el-col :span="12">
        <el-form-item label="联系人">
          <el-input :disabled='isPreview' v-model="form.contacts" placeholder=""></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="联系手机">
          <el-input :disabled='isPreview' v-model="form.contactsMobile" placeholder=""></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="申请日期">
          <el-date-picker
          :disabled='isPreview'
            v-model="form.applyDate"
            type="date"
            placeholder="选择申请日期"
          >
          </el-date-picker>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row style="text-align: center">
      <el-col>
        <el-button
          v-loading="loading"
          class="dialogBtn"
          type="primary"
          v-if='!isPreview'
          @click="next"
          >下一步</el-button
        >
      </el-col>
    </el-row>
  </el-form>
</template>
<script>
import {
  // getDictionaryApi,
  getshengshiquApi
  // saveCustomerFile3Api
} from '@/api/customerFile'
import {
  // getInfoDataApi,
  saveCompanyRegister3Api
} from '@/api/companyRegister'
import dayjs from 'dayjs'
export default {
  name: 'CompanyInfo',
  props: ['id', 'isEdit', 'companyData', 'isPreview'],
  data () {
    return {
      form: {},
      province: [],
      city: [],
      area: [],
      HYFL: [],
      HYLB: [
        { id: 'A000', value: '一、农、林、牧、渔业' },
        { id: 'GG00', value: '二、工业' },
        { id: 'E000', value: '三、建筑业' },
        { id: 'F000', value: '四、交通运输、仓储和邮政业' },
        { id: 'G000', value: '五、信息传输、计算机服务和软件业' },
        { id: 'H000', value: '六、商业、住宿和餐饮业' },
        { id: 'J000', value: '七、金融、房地产、商务及居民服务业' },
        { id: 'M000', value: '八、公共事业及管理组织' }
      ],
      loading: false
    }
  },
  async created () {
    this.$watch('form.provinceName', async (newVal) => {
      this.$set(this.form, 'cityName', '')
      // console.log(this.province)
      this.form.province = await this.province.find(
        (item) => item.text === newVal
      )?.value
      // console.log(this.form.province)
      const shi = await getshengshiquApi(this.form.province)
      this.city = shi.data.list
      // console.log(shi)
    })
    this.$watch('form.cityName', async (newVal) => {
      this.$set(this.form, 'areaName', '')
      this.form.city = this.city.find(
        (item) => item.text === newVal
      )?.value
      const qu = await getshengshiquApi(this.form.city)
      // console.log(qu)
      this.area = qu.data.list
    })
    this.$watch('form.areaName', async (newVal) => {
      this.form.area = this.area.find(
        (item) => item.text === newVal
      )?.value
      // console.log(this.form)
    })
    this.$watch('form.applyDate', async (newVal) => {
      this.form.applyDate = dayjs(newVal).format('YYYY-MM-DD')
    })
    await this.getProvince()
    if (this.isPreview) {
      this.getInfoData()
    } else {
      this.setForm()
    }
  },
  async mounted () {
    // await this.getchushihua()
    // await this.getdatalist()
    // await this.getProvince()
    // await this.getBusiness()
  },
  methods: {
    async getInfoData () {
      const data = this.companyData
      this.form = {
        orgName: data.orgName,
        enterpriseCode: data.enterpriseCode,
        address: data.address,
        contacts: data.contacts,
        contactsMobile: data.contactsMobile,
        applyDate: data.applyDate
      }
      await this.$set(this.form, 'provinceName', data.provinceName)
      await this.$set(this.form, 'cityName', data.cityName)
      await this.$set(this.form, 'areaName', data.areaName)
    },
    async setForm () {
      const data = this.companyData
      this.form = {
        orgName: data.companyName,
        enterpriseCode: data.creditNo,
        address: data.companyAddress,
        contacts: data.legalPerson,
        contactsMobile: data.contacts?.phoneNumber ? data.contacts?.phoneNumber[0].value : '',
        applyDate: dayjs().format('YYYY-MM-DD')
      }
      await this.$set(this.form, 'provinceName', data.province)
      setTimeout(() => {
        this.$set(this.form, 'cityName', data.city)
      }, 500)
      setTimeout(() => {
        this.$set(this.form, 'areaName', data.district)
      }, 800)
    },
    async getProvince () {
      const res = await getshengshiquApi('0')
      this.province = res.data.list
      console.log(this.province)
    },
    // async getCity (cityName) {
    //   const resp = await getshengshiquApi(this.form.province)
    //   console.log(resp)
    //   this.city = resp.data.list
    //   this.$set(this.form, 'cityName', cityName || '')
    //   this.form.city = this.city.find(
    //     (item) => item.text === this.form.cityName
    //   )?.value
    // },
    // async getArea (areaName) {
    //   const resp = await getshengshiquApi(this.form.city)
    //   console.log(resp)
    //   this.area = resp.data.list
    //   this.$set(this.form, 'areaName', areaName || '')
    //   this.form.area = this.area.find(
    //     (item) => item.text === this.form.areaName
    //   )?.value
    // },
    sheng (sheng, shi, qu) {
      this.$nextTick(async () => {
        await this.$set(this.form, 'provinceName', sheng)
        await this.$set(this.form, 'cityName', shi)
        await this.$set(this.form, 'areaName', qu)
      })
    },
    // async getIndustryType (industryTypeName) {
    //   const resp = await getDictionaryApi(
    //     'GWYXDM_HYFL',
    //     this.form.industryCategory
    //   )
    //   console.log(resp)
    //   this.HYFL = resp.data.list
    //   this.HYFL.shift()
    //   this.$set(this.form, 'industryTypeName', industryTypeName || '')
    //   this.form.industryCategory = this.HYLB.find(
    //     (item) => item.value === this.form.industryCategoryName
    //   )?.id
    // },
    async next () {
      this.loading = true
      try {
        const res = await saveCompanyRegister3Api({ ...this.form, id: this.id })
        console.log(res)
        if (res.code == 200) {
          this.$emit('next', 4)
        } else {
          this.$message.error(res.message)
        }
      } catch (error) {
      } finally {
        this.loading = false
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.el-select {
  width: 100%;
}
.el-date-editor {
  width: 100%;
}
</style>
